<!--
 作者：ex_baiyc
 日期：2016-9-24
 功能：展示页面中右上角筛选按钮点击后展示
 参数：filterOption  接收从父组件中传递过来的默认筛选条件
      pageId 即父组件页面的mkey，根据此值请求当前页需要的筛选条件，
 事件：filterConditions  传递筛选参数到父组件
      品类、平台信息一次性返回，前端做联动；品牌集合及我的关注的品牌异步发送请求获取后渲染
-->
<template>
  <div class="filter-box">
    <div class="opacityDom" @click="hidden" transition="expand2" v-show="$parent.filterOpenState"></div>
    <div class="filter-view" transition="expand" v-show="$parent.filterOpenState">
      <div class="btn-wrap display-flex">
        <span @click="reset" class="btn-reset flex1">重置</span>
        <span @click="doFilter" class="btn-dofilter flex1">完成</span>
      </div>
      <ul class="filter-content">
        <!-- 时间 -->
        <li class="filter-item clearfix" v-if="$route.name.indexOf('home')==-1">
          <h3 class="title">时间</h3>
          <div class="filter-tab-button">
            <a :class="{'active': showTimeModule === 1}" @click="choiceTimeModule(1)">年度</a>
            <a :class="{'active': showTimeModule === 2}" @click="choiceTimeModule(2)">月度</a>
            <a :class="{'active': showTimeModule === 3}" @click="choiceTimeModule(3)">自定义</a>
          </div>
          <div v-show="showTimeModule === 1">
            <span id="chooseYear" :class="['item', 'flex1', {'item-active' : dateSeg === 'year'}]" @click="setTimeYear">
              <datetime :title="currentYear"
                        confirm-text="确认"
                        :max-year="nowYear"
                        :min-year="2015"
                        cancel-text="取消"
                        year-row="{value}年"
                        month-row="{value}月"
                        day-row="{value}日"
                        @change="changeYear"
                        :value.sync="chooseYear">
              </datetime>年度
            </span>
          </div>
          <div v-show="showTimeModule === 2">
            <div class="display-flex" @click="setTimeMonth">
              <div id="chooseMonthStart" class="item flex1 item-date">
                <datetime :title="currentMonth"
                          :max-year="nowYear"
                          :min-year="2015"
                          confirm-text="确认"
                          cancel-text="取消"
                          year-row="{value}年"
                          month-row="{value}月"
                          :value.sync="chooseMonthStart">
                </datetime>开始月份
              </div>
              <span style="padding-top:1.5%;">__</span>
              <div id="chooseMonthEnd" class="item flex1 item-date">
                <datetime :title="currentMonth"
                          :max-year="nowYear"
                          :min-year="2015"
                          confirm-text="确认"
                          cancel-text="取消"
                          year-row="{value}年"
                          month-row="{value}月"
                          :value.sync="chooseMonthEnd">
                </datetime>结束月份
              </div>
            </div>
          </div>
          <div v-show="showTimeModule === 3">
            <div class="display-flex" @click="customData">
              <div id="startDate" class="item flex1 item-date">
                <datetime title="开始时间"
                          confirm-text="确认"
                          :min-year="2015"
                          :max-year="nowYear"
                          :value.sync="startDate"
                          year-row="{value}年"
                          month-row="{value}月"
                          day-row="{value}日"
                          cancel-text="取消"></datetime>
              </div>
              <span style="padding-top:1.5%;">__</span>
              <div id="endDate" class="item flex1 item-date">
                <datetime title="结束时间"
                          confirm-text="确认"
                          :min-year="2015"
                          :max-year="nowYear"
                          :value.sync="endDate"
                          year-row="{value}年"
                          month-row="{value}月"
                          day-row="{value}日"
                          cancel-text="取消"></datetime>
              </div>
            </div>
          </div>
        </li>
        <!--平台-->
        <li class="filter-item" v-if="!defaultPlatform">
          <h3 class="title">平台</h3>
          <div class="">
          <span class="item"
                v-for="item in condition.platforms"
                :id="item.id"
                @click="addToPlatforms($event)"
                :class="[{'item-active' : choosePlatforms.toString().indexOf(item.name) > -1}]">{{item.name}}</span>
          </div>
        </li>
        <!--店铺监控-->
        <li class="filter-item" v-if="defaultPlatform">
          <h3 class="title">平台</h3>
          <div class="">
          <span class="item"
                v-for="item in condition.platforms"
                :id="item.id"
                @click="addToPlatforms($event)"
                :class="[{ 'item-active' : defaultPlatform.indexOf(item.name) > -1}]">{{item.name}}</span>
          </div>
        </li>
        <!--行业单选-->
        <li v-if="allCondition.department_stype === 'radio'" class="filter-item clearfix">
          <h3 class="title">行业</h3>
          <div class="clearfix">
            <span class="item float-left"
                v-for="item in condition.department"
                :id="item.departmentId"
                @click="getCategory('department', $index)"
                :class="[{ 'item-active' : $index == departmentActiveIndex}]">{{item.department}}</span>
          </div>
        </li>
        <!--行业多选-->
        <!--      <li v-if="allCondition.department_stype === 'checkbox'" class="filter-item">
                <h3 class="title">行业</h3>
                <div class="">
                  <span class="item"
                        v-for="item in condition.department"
                        :id="item.departmentId"
                        @click="gextCategory('department', $inde)"
                        :class="[{ 'item-active' : $index == departmentActiveIndex}]">{{item.department}}</span>
                </div>
              </li>-->

        <!--品类单选-->
        <li v-if="allCondition.category_stype === 'radio'" class="filter-item clearfix">
          <h3 class="title">品类</h3>
          <div class="clearfix">
            <span class="item float-left"
                v-for="item in categorys"
                :id="item.id"
                @click="getCategory('category', item.id, item.category)"
                :class="[{ 'item-active' : item.id == categorysActiveIndex}]">{{item.category}} <!-- <i class="popover-content">{{item.category}}</i> --> </span>
          </div>
        </li>

        <!--品类多选-->
        <li v-if="allCondition.category_stype === 'checkbox'" class="filter-item clearfix">
          <h3 class="title">品类</h3>
          <span class="btn-small" @click="addAllCat">全选</span>
          <span class="btn-small" @click="removeAllCat">全不选</span>
          <div class="multiCategory" v-for="categorys in condition.department">
            <span class="item"
                  v-for="item in categorys.categorys"
                  :id="item.id"
                  @click="addToCategorys($event)"
                  :class="[{ 'item-active' : defaultCategory.indexOf(item.category) > -1}]">{{item.category}}
            </span>
          </div>
        </li>

        <!--品牌单选-->
        <li v-if="allCondition.brand_stype === 'radio'" class="filter-item">
          <h3 class="title">品牌</h3>
          <div class="clearfix">
            <div class="subtitle">我的关注<span :class="['float-right', 'btn-slidedown', {'slideUp': showCollect}]" @click="showCollect = !showCollect"></span></div>
            <p v-if="condition.collectBrands.length == 0" class="tip">暂无关注品牌，可在我->我的关注进行设置</p>
          </div>
          <div class="clearfix" v-show="showCollect">
            <span class="item"
                v-for="item in condition.collectBrands"
                :id="item.id"
                @click="getCategory('brands', $event)"
                :title="item.category"
                :class="[{ 'item-active' :  item.id == brandActiveIndex}]">
            {{item.brand}}
          </span>
          </div>
          <div class="subtitle">所有品牌 <span :class="['float-right', 'btn-slidedown', {'slideUp': showAllBrand}]" @click="showAllBrand = !showAllBrand"></span></div>
          <ul v-for="item in condition.brands" v-show="showAllBrand">
            <div class="subtitle">{{item[0].pinyinCapital}}</div>
            <li class="item"
                v-for="brand in item"
                :id="brand.id"
                @click="getCategory('brands', $event)"
                :class="[{ 'item-active' :  brand.id == brandActiveIndex}]">
              {{brand.brand}}
            </li>
          </ul>
        </li>

        <!--品牌多选-->
        <li v-if="allCondition.brand_stype === 'checkbox'" class="filter-item clearfix">
          <h3 class="title">品牌</h3>
          <div class="subtitle">我的关注<span :class="['float-right', 'btn-slidedown', {'slideUp': showCollect}]" @click="showCollect = !showCollect"></span></div>
          <p v-if="condition.collectBrands.length == 0" class="tip">暂无关注品牌，可在我->我的关注 进行设置</p>
          <div class="clearfix" v-show="showCollect">
            <span class="item float-left"
                  v-for="item in condition.collectBrands"
                  :id="item.id"
                  @click="addToBrands($event)"
                  :class="[{ 'item-active' :  item.brand_id == brandActiveIndex}]">
              {{item.brand}}
            </span>
          </div>
          <div class="subtitle">所有品牌 <span :class="['float-right', 'btn-slidedown', {'slideUp': showAllBrand}]" @click="showAllBrand = !showAllBrand"></span></div>
          <span class="btn-small" @click="addAllBrand">全选</span>
          <span class="btn-small" @click="removeAllBrand">全不选</span>
          <ul v-for="item in condition.brands" v-show="showAllBrand " class="clearfix multiBrand">
            <div class="subtitle">{{item[0].pinyinCapital}}</div>
            <div class="clearfix" v-show="showAllBrand">
              <li class="item float-left"
                  v-for="brand in item"
                  :id="brand.id"
                  @click="addToBrands($event)"
                  :class="[{ 'item-active' :  brand.id == brandActiveIndex}]">
                {{brand.brand}}
              </li>
            </div>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  import Calendar from 'vux/dist/components/Calendar'
  import Group from 'vux/dist/components/group'
  import Selector from 'vux/dist/components/selector'
  import datetime from 'vux/dist/components/datetime'

  // 获取某年某月的最后一天
  function getLastDayOfMonth (dataStr) {
    let year = Number(dataStr.slice(0, 4))
    let month = Number(dataStr.slice(5, 7))
    let date = new Date(year, month - 1, '01')
    date.setDate(1)
    date.setMonth(date.getMonth() + 1)
    let cdate = new Date(date.getTime() - 1000 * 60 * 60 * 24)
    let day = cdate.getDate()
    return dataStr + '-' + (day < 10 ? '0' + day : '' + day)
  }

//  查找元素是否在数组中存在
  function findObjIndex (arr, obj) {
    for (var i = 0; i < arr.length; i++) {
      if (arr[i] === obj) {
        return i
      }
    }
    return -1
  }

  /**
   * 获取当前时间年月
   * @param type 1表示xxxx-xx 2表示xxxx年xx月
   */
  function getCurrentMonth (type) {
    let date = new Date()
    let year = date.getFullYear()
    let month = date.getMonth() + 1
    month = month < 10 ? '0' + month : '' + month
    if (type === 1) {
      return year + '-' + month
    } else if (type === 2) {
      return year + '年' + month + '月'
    }
  }

  export default {
    components: {Calendar, Group, Selector, datetime},
    // props: ['choosePlatforms', 'choosePlatformsId', 'pageId', 'defaultOrgId', 'defaultCategory', 'defaultCategoryId', 'defaultPlatform', 'tabId', 'filterButton', 'defaultStartDate', 'defaultEndDate'],
    props: {
      'choosePlatforms': {
        default: ''
      },
      'choosePlatformsId': {

      },
      'pageId': {

      },
      'defaultOrgId': {

      },
      'defaultCategory': {

      },
      'defaultCategoryId': {

      },
      'defaultPlatform': {

      },
      'tabId': {

      },
      'filterButton': {

      },
      'defaultStartDate': {

      },
      'defaultEndDate': {

      }
    },
    data: function () {
      return {
        brand_all: '',
        showCollect: true,
        allCondition: '',
        condition: {
          department: [],
          collectBrands: [],
          platforms: [],
          brands: []
        },
        departmentActiveIndex: '',
        categorysActive: '',
        categorysActiveIndex: '',
        platformsActiveIndex: '',
        brandActiveIndex: '',
        startDate: '',
        endDate: '',
        initDefaultDateCount: 0,
        value: '',
        showAllBrand: true,
        dateSeg: 'year',    // year season month other
        chooseYear: (new Date()).getFullYear() + '-01-01',
        chooseSeason: '',
//        chooseMonth: '',
        chooseMonthStart: '',
        chooseMonthEnd: '',
//       * ************************************以下为多选时
        chooseCategorys: [],
        chooseCategorysID: [],
        chooseBrand: '',
        chooseBrands: [],
        chooseBrandsID: [],
        // choosePlatforms: ''
        // choosePlatformsId: []
        showTimeModule: 1,   // 筛选时间的模式，1：年度、2：月度、3：自定义
        currentYear: (new Date()).getFullYear() + '年',
        currentMonth: getCurrentMonth(2)
      }
    },
    computed: {
      categorys: function () {
        if (this.condition.department[this.departmentActiveIndex]) {
          return this.condition.department[this.departmentActiveIndex].categorys || []
        } else {
          return []
        }
      },
      nowYear: function () {
        return new Date().getFullYear()
      }
    },
    methods: {
      addAllCat: function () {
        this.chooseCategorys = []
        this.chooseCategorysID = []
        this.categorysActive = []
        this.categorysActiveIndex = []
        for (let i = 0; i < this.condition.department.length; i++) {
          for (let j = 0; j < this.condition.department[i].categorys.length; j++) {
            this.chooseCategorys.push(this.condition.department[i].categorys[j].category)
            this.chooseCategorysID.push(this.condition.department[i].categorys[j].id)
          }
        }
        var item = document.querySelectorAll('.multiCategory .item')
        for (let i = 0; i < item.length; i++) {
          item[i].classList.add('item-active')
        }
      },
      removeAllCat: function () {
        this.chooseCategorys = []
        this.chooseCategorysID = []
        this.categorysActive = []
        this.categorysActiveIndex = []
        this.defaultCategory = []
        this.defaultCategoryId = []
        var item = document.querySelectorAll('.multiCategory .item')
        for (let i = 0; i < item.length; i++) {
          item[i].classList.remove('item-active')
        }
      },
      addAllBrand: function () {
        this.chooseBrands = []
        this.chooseBrandsID = []
        try {
          for (var x in this.condition.brands) {
            if (this.condition.brands[x] instanceof Array) {
              for (var i = 0; i < this.condition.brands[x].length; i++) {
                this.chooseBrands.push(this.condition.brands[x][i].brand)
                this.chooseBrandsID.push(this.condition.brands[x][i].id)
              }
            }
          }
        } catch (error) {
        }
        this.brand_all = true
        var item = document.querySelectorAll('.multiBrand .item')
        for (let i = 0; i < item.length; i++) {
          item[i].classList.add('item-active')
        }
      },
      removeAllBrand: function () {
        this.brand_all = false
        this.chooseBrands = []
        this.chooseBrandsID = []
        var item = document.querySelectorAll('.multiBrand .item')
        for (let i = 0; i < item.length; i++) {
          item[i].classList.remove('item-active')
        }
      },
      showPopover: function (event, category) {
      },
      hidden: function () {
        this.slideState = false
        var self = this
        setTimeout(function () {
          self.$parent.filterOpenState = false
        }, 200)
      },
//      获取筛选条件
      getData: function (params) {
        this.$http.post(window.interface.conditions, params).then((res) => {
          var data = res.json()
          this.allCondition = data
          this.condition.platforms = data.platforms
          if (this.choosePlatforms === '所有平台') {
            this.choosePlatforms = []
            this.choosePlatformsId = []
            for (let i = 0; i < data.platforms.length; i++) {
              this.choosePlatforms.push(data.platforms[i].name)
              this.choosePlatformsId.push(data.platforms[i].id)
            }
          } else {
            try {
              if (typeof this.choosePlatforms === 'string') {
                this.choosePlatforms = this.choosePlatforms.split(',')
              }
              if (typeof this.choosePlatformsId === 'string') {
                this.choosePlatformsId = this.choosePlatformsId.split(',')
              }
            } catch (error) {
            }
          }
          this.condition.department = data.dcTree

          this.$http.post(window.interface.brands, {category_id: this.categorysActiveIndex.toString()}).then((res) => {
            var data = res.json()
            this.condition.collectBrands = data.collectBrands
            this.condition.brands = data.brands

            // this.chooseBrand = data.collectBrands ? data.collectBrands[0].brand : (function () {
            //   for (var x in data.brands) {
            //     return data.brands[x][0].brand
            //   }
            // })()
            // this.brandActiveIndex = data.collectBrands ? data.collectBrands[0].id : (function () {
            //   for (var x in data.brands) {
            //     return data.brands[x][0].id
            //   }
            // })()
          })
        })
      },
//      联动切换下级分类
      getCategory: function (condition, id, value) {
        switch (condition) {
          case 'department':
            this.departmentActiveIndex = id
            this.categorysActiveIndex = this.condition.department[id].categorys[0].id
            this.categorysActive = this.condition.department[id].categorys[0].category
            break
          case 'category':
            this.categorysActive = value
            this.categorysActiveIndex = id
            this.$http.post(window.interface.brands, {category_id: this.categorysActiveIndex}).then((res) => {
              var data = res.json()
              this.condition.collectBrands = data.collectBrands
              this.condition.brands = data.brands
            })
            break
          case 'brands':
            this.brandActiveIndex = id.target.id
            this.chooseBrand = id.target.innerText
            break
        }
      },
//      选择年
      setTimeYear: function () {
        this.dateSeg = 'year'
        this.changeYear(this.chooseYear)
        var dpEle = document.querySelectorAll('.dp-container')
        for (var i = 0; i < dpEle.length; i++) {
          if (dpEle[i].style.display === 'block') {
            dpEle[i].querySelectorAll('.dp-content .dp-item')[2].style.display = 'none'
            dpEle[i].querySelectorAll('.dp-content .dp-item')[1].style.display = 'none'
          }
        }
      },
      changeYear: function (val) {
        // try {
        //   let now = new Date()
        //   if (!val) {
        //     val = now.getFullYear().toString()
        //   }
        //   this.startDate = val.substring(0, 4) + '-1-1'
        //   // this.endDate = val

        //   if (parseFloat(val.substring(0, 4)) === now.getFullYear()) {
        //     this.endDate = now.getFullYear() + '-' + (now.getMonth() + 1) + '-' + now.getDate()
        //   } else {
        //     this.endDate = val.substring(0, 4) + '-12-31'
        //   }
        // } catch (error) {
        // }
      },
//      选择季
      setTimeSeason: function () {
        this.dateSeg = 'season'
        var dpEle = document.querySelectorAll('.dp-container')
        for (var i = 0; i < dpEle.length; i++) {
          if (dpEle[i].style.display === 'block') {
            if (!dpEle[i].querySelectorAll('.dp-content .dp-item')[2]) {
              return
            }
            dpEle[i].querySelectorAll('.dp-content .dp-item')[2].style.display = 'none'
            dpEle[i].querySelectorAll('.dp-content .dp-item')[1].getElementsByClassName('scroller-content')[0].style.transform = 'translate3d(0px, 0px, 0px)'
            var scrollItemEle = dpEle[i].querySelectorAll('.dp-content .dp-item:nth-child(2) .scroller-content .scroller-item')
            // var scrollComponentEle = document.getElementsByClassName('scroller-component')[1]
            // var scrollContentEle = document.getElementsByClassName('scroller-content')[1]
//             scrollComponentEle.addEventListener('touchend', function (event) {
//               var scrollYPosition = parseInt(scrollContentEle.style.transform.split(',')[1])
// //              if (scrollYPosition < 0) {
// //                scrollContentEle.style.backgroundColor = '#F00'
// //                setTimeout(function () {
// //                  scrollContentEle.style.transform = 'translate3d(0px, 0px, 0px) !important;'
// //                }, 2000)
// //              } else {
// //                scrollContentEle.style.backgroundColor = '#FFF'
// //              }
//               if (scrollYPosition < 0) {
//                 scrollContentEle.setAttribute('id', 'scrollY0')
//               } else {
//                 scrollContentEle.removeAttribute('id', 'scrollY0')
//               }
//             }, false)
            for (var j = 4; j < 13; j++) {
              if (scrollItemEle[j]) {
                scrollItemEle[j].style.display = 'none'
              }
            }
          }
        }
      },
      changeSeason: function (val) {
      },
//      选择月
      setTimeMonth: function () {
        this.dateSeg = 'month'
        var dpEle = document.querySelectorAll('.dp-container')
        for (var i = 0; i < dpEle.length; i++) {
          if (dpEle[i].style.display === 'block') {
            dpEle[i].querySelectorAll('.dp-content .dp-item')[2].style.display = 'none'
          }
        }
      },
      changeMonth: function (val) {
      },
//    自定义日期
      customData: function () {
        this.dateSeg = 'other'
      },
//    多选平台
      addToPlatforms: function (event) {
        var pltInchooseplatsIndex = findObjIndex(this.choosePlatforms, event.target.innerText)
        if (pltInchooseplatsIndex !== -1) {
          this.choosePlatforms.splice(pltInchooseplatsIndex, 1)
          this.choosePlatformsId.splice(pltInchooseplatsIndex, 1)
          event.target.classList.remove('item-active')
        } else {
          this.choosePlatforms.push(event.target.innerText)
          this.choosePlatformsId.push(event.target.id)
          event.target.classList.add('item-active')
        }
      },
//    多选品类
      addToCategorys: function (event) {
        var catInchooseCatsIndex = findObjIndex(this.chooseCategorys, event.target.innerText)
        if (catInchooseCatsIndex !== -1) {
          this.chooseCategorys.splice(catInchooseCatsIndex, 1)
          if (typeof this.chooseCategorysID === 'string') {
            this.chooseCategorysID.split(',').splice(catInchooseCatsIndex, 1)
          } else {
            this.chooseCategorysID.splice(catInchooseCatsIndex, 1)
          }
          event.target.classList.remove('item-active')
        } else {
          this.chooseCategorys.push(event.target.innerText)
          if (typeof this.chooseCategorysID === 'string' && this.chooseCategorysID.length > 0) {
            this.chooseCategorysID.split(',').push(event.target.id)
          } else {
            if (this.chooseCategorysID.length === 0) {
              this.chooseCategorysID = [event.target.id]
            } else {
              this.chooseCategorysID.push(event.target.id)
            }
          }
          event.target.classList.add('item-active')
        }
        if (this.allCondition.brand_stype !== 'disabled') {
          this.$http.post(window.interface.brands, {category_id: this.chooseCategorysID.join(',')}).then((res) => {
            var data = res.json()
            this.condition.collectBrands = data.collectBrands
            this.condition.brands = data.brands
          })
        }
      },
//    多选品牌
      addToBrands: function (event) {
        this.brand_all = false
        var brdInchooseBrdsIndex = findObjIndex(this.chooseBrands, event.target.innerText)
        if (brdInchooseBrdsIndex !== -1) {
          this.chooseBrands.splice(brdInchooseBrdsIndex, 1)
          this.chooseBrandsID.splice(brdInchooseBrdsIndex, 1)
          event.target.classList.remove('item-active')
        } else {
          this.chooseBrands.push(event.target.innerText)
          this.chooseBrandsID.push(event.target.id)
          event.target.classList.add('item-active')
        }
      },
//      重置,清除所有选择
      reset: function () {
        this.chooseBrands = []
        this.chooseBrandsID = []
        this.chooseCategorys = []
        this.chooseCategorysID = []
        this.choosePlatforms = []
        this.choosePlatformsId = []
        this.departmentActiveIndex = -1
        this.categorysActive = ''
        this.dateSeg = ''
//        document.querySelector('#chooseYear .weui_cell').innerHTML = '年度'
//        document.querySelector('#chooseMonth .weui_cell').innerHTML = '月度'
//        document.querySelector('#startDate .weui_cell').innerHTML = '开始日期'
//        document.querySelector('#endDate .weui_cell').innerHTML = '结束日期'
        var item = document.getElementsByClassName('item')
        for (let i = 0; i < item.length; i++) {
          item[i].classList.remove('item-active')
        }
      },
//      执行筛选, 点完成按钮后将选择的条件传递至父页面
      doFilter: function () {
        try {
          // if (this.categorysActive === '' && this.choosePlatforms.length === 0 && this.chooseCategorys.length === 0 && this.chooseBrands.length === 0) {
          //   window.alert('请选择条件!')
          //   return
          // }
//          if (Date.parse(this.endDate) > Date.parse(new Date())) {
//            window.alert('结束时间不能晚于今天!')
//            return
//          }
//        组织筛选的条件
          this.$parent.filterOpenState = false
          var filterConditions = {
            department: this.condition.department[this.departmentActiveIndex] ? this.condition.department[this.departmentActiveIndex].department : '',
            org_code: this.condition.department[this.departmentActiveIndex] ? this.condition.department[this.departmentActiveIndex].departmentId : '',
            category: typeof this.categorysActive === 'string' ? this.categorysActive : String(this.categorysActive),
            category_id: typeof this.categorysActiveIndex === 'string' ? this.categorysActiveIndex : String(this.categorysActiveIndex),
            platform: this.choosePlatforms instanceof Array ? this.choosePlatforms.join(',') : '',
            platform_id: this.choosePlatformsId instanceof Array ? this.choosePlatformsId.join(',') : '',
            brand_id: this.brandActiveIndex || '',
            brand: this.chooseBrand || '',
            starttime: '',
            endtime: '',
            dateSeg: this.dateSeg || '',
            brand_all: this.brand_all
          }
//        品类为多选时取chooseCategorys里的品类和品类ID
          if (this.allCondition.category_stype === 'checkbox') {
            filterConditions.category = this.chooseCategorys.join(',')
            filterConditions.category_id = typeof this.chooseCategorysID === 'string' ? this.chooseCategorysID : this.chooseCategorysID.join(',')
            filterConditions.department = ''
          }
//        品牌为多选时取chooseBrans里的品牌和品牌ID
          if (this.allCondition.brand_stype === 'checkbox') {
            filterConditions.brand = this.chooseBrands.join(',')
            filterConditions.brand_id = this.chooseBrandsID.join(',')
          }
//        判断时间是按那种类型进行选择的，然后对starttime,endtime重新赋值
          switch (this.dateSeg) {
            case 'year':
              filterConditions.starttime = this.chooseYear.substr(0, 4) + '-01-01'
              filterConditions.endtime = this.chooseYear.substr(0, 4) + '-12-31'
              break
//          case 'season':
//            var season = this.chooseSeason.substring(5, 7)
//            var year = this.chooseSeason.substring(0, 4)
//            switch (season) {
//              case '01':
//                filterConditions.starttime = year + '-01-01'
//                filterConditions.endtime = year + '-03-31'
//                break
//              case '02':
//                filterConditions.starttime = year + '-04-01'
//                filterConditions.endtime = year + '-06-31'
//                break
//              case '03':
//                filterConditions.starttime = year + '-07-01'
//                filterConditions.endtime = year + '-09-31'
//                break
//              default:
//                filterConditions.starttime = year + '-10-01'
//                filterConditions.endtime = year + '-12-31'
//                break
//            }
//            break
            case 'month':
//            var month = this.chooseMonth.substring(5, 7)
//            switch (month) {
//              case '02':
//                filterConditions.starttime = this.chooseMonth.substr(0, 7) + '-01'
//                filterConditions.endtime = this.chooseMonth.substr(0, 7) + '-28'
//                break
//              case '04':
//                filterConditions.starttime = this.chooseMonth.substr(0, 7) + '-01'
//                filterConditions.endtime = this.chooseMonth.substr(0, 7) + '-30'
//                break
//              case '06':
//                filterConditions.starttime = this.chooseMonth.substr(0, 7) + '-01'
//                filterConditions.endtime = this.chooseMonth.substr(0, 7) + '-30'
//                break
//              case '09':
//                filterConditions.starttime = this.chooseMonth.substr(0, 7) + '-01'
//                filterConditions.endtime = this.chooseMonth.substr(0, 7) + '-30'
//                break
//              case '11':
//                filterConditions.starttime = this.chooseMonth.substr(0, 7) + '-01'
//                filterConditions.endtime = this.chooseMonth.substr(0, 7) + '-30'
//                break
//              default:
//                filterConditions.starttime = this.chooseMonth.substr(0, 7) + '-01'
//                filterConditions.endtime = this.chooseMonth.substr(0, 7) + '-31'
//            }
              // 如果用户没有选择开始日期
              if (!this.chooseMonthStart) {
                this.chooseMonthStart = getCurrentMonth(1)
              }
              // 如果用户没有选择结束日期
              if (!this.chooseMonthEnd) {
                this.chooseMonthEnd = getCurrentMonth(1)
              }
              if (Date.parse(this.chooseMonthStart) > Date.parse(this.chooseMonthEnd)) {
                window.alert('结束时间不能大于开始时间!')
                return
              }
              filterConditions.starttime = this.chooseMonthStart.substr(0, 7) + '-01'
              filterConditions.endtime = getLastDayOfMonth(this.chooseMonthEnd.substr(0, 7))
              break
            case 'other':
              if (Date.parse(this.startDate) > Date.parse(this.endDate)) {
                window.alert('结束时间不能大于开始时间!')
                return
              }
              if ((Date.parse(this.endDate) - Date.parse(this.startDate)) / 60 / 60 / 24 / 1000 > 90) {
                window.alert('自定义时间不能大于3个月')
                return
              }
              // if ((Date.parse(this.endDate) > Date.parse(new Date()))) {
              //   window.alert('结束时间不能大于当前时间')
              //   return
              // }
              filterConditions.starttime = this.startDate
              filterConditions.endtime = this.endDate
              break
            default:
              break
          }
          this.$dispatch('filterConditions', filterConditions)
          this.$parent.filterOpenState = false
        } catch (err) {
          console.error(err)
        }
      },
      choiceTimeModule (value) {
        if (value === 1) {
          this.setTimeYear()
        } else if (value === 2) {
          this.setTimeMonth()
        } else if (value === 3) {
          this.customData()
        }
        this.showTimeModule = value
      }
    },
    events: {
      'doFilter': function () {
      }
    },
    ready: function () {
      this.$on('loadDataDone', function () {
        var params = {'mkey': this.pageId}
        this.getData(params)
      })
      this.nowYear = new Date().getFullYear()
      // document.getElementsByClassName('filter-box')[0].addEventListener('touchstart', function (event) {
        // event.stopPropagation()
        // event.preventDefault()
        // return false
      // }, false)
    },
    watch: {
      // choosePlatforms: function (newV) {
      //   // chenqy9 17-03-08 这里要对类型做一下判断和转换
      //   try {
      //     if (this.choosePlatforms === '所有平台') {
      //       this.choosePlatforms = []
      //       this.choosePlatformsId = []
      //       for (let i = 0; i < this.condition.platforms.length; i++) {
      //         this.choosePlatforms.push(this.condition.platforms[i].name)
      //         this.choosePlatformsId.push(this.condition.platforms[i].id)
      //       }
      //     } else {
      //       if (typeof this.choosePlatforms === 'string') {
      //         this.choosePlatforms = this.choosePlatforms.split(',')
      //       }
      //       if (typeof this.choosePlatformsId === 'string') {
      //         this.choosePlatformsId = this.choosePlatformsId.split(',')
      //       }
      //     }
      //   } catch (error) {
      //   }
      // },
      defaultStartDate: function (newV) {
        if (this.initDefaultDateCount < 2) {
          this.initDefaultDateCount++
          this.startDate = newV
        }
      },
      defaultEndDate: function (newV) {
        if (this.initDefaultDateCount < 2) {
          this.initDefaultDateCount++
          this.endDate = newV
        }
      },
      filterButton: function () {
        switch (this.filterButton) {
          case 'pinpai':
            if (this.allCondition.category_stype === 'checkbox') {
              document.querySelector('.filter-content').scrollTop = 960
            } else {
              document.querySelector('.filter-content').scrollTop = 700
            }
            break
          case 'pinlei':
//            var titleDom = document.getElementsByClassName('title')
//            var number = 0
//            for (var i = 0; i < titleDom.length; i++) {
//              if (titleDom[i].innerHTML === '品类') {
//                number = i
//                break
//              }
//            }
//            if (this.allCondition.category_stype === 'checkbox') {
//              document.querySelector('.filter-content').scrollTop = document.getElementsByClassName('title')[number].offsetTop - 420
//            } else {
//              document.querySelector('.filter-content').scrollTop = document.getElementsByClassName('title')[number].scrollTop - 270
//            }
            if (this.allCondition.category_stype === 'checkbox') {
              document.querySelector('.filter-content').scrollTop = 300
            } else {
              document.querySelector('.filter-content').scrollTop = 340
            }
            break
          case 'pingtai':
            document.querySelector('.filter-content').scrollTop = 0
            break
          case 'shijian':
            document.querySelector('.filter-content').scrollTop = 0
            break
        }
      },
      'chooseYear': function (newV) {
        document.querySelector('#chooseYear .weui_cell').innerHTML = this.chooseYear.substring(0, 4) + '年'
        this.changeYear(newV)
//        document.querySelector('#chooseMonthStart .weui_cell').innerHTML = '开始月份'
//        document.querySelector('#chooseMonthEnd .weui_cell').innerHTML = '结束月份'
//        document.querySelector('#startDate .weui_cell').innerHTML = '开始日期'
//        document.querySelector('#endDate .weui_cell').innerHTML = '结束日期'
      },
//      'chooseSeason': function (newV) {
//        document.querySelector('#chooseSeason .weui_cell').innerHTML = this.chooseSeason.substring(0, 4) + '年' + this.chooseSeason.substring(5, 7) + '季度'
//        document.querySelector('#chooseYear .weui_cell').innerHTML = '年度'
//        document.querySelector('#chooseMonth .weui_cell').innerHTML = '月度'
//        document.querySelector('#startDate .weui_cell').innerHTML = '开始日期'
//        document.querySelector('#endDate .weui_cell').innerHTML = '结束日期'
//      },
//      'chooseMonth': function (newV) {
//        document.querySelector('#chooseMonth .weui_cell').innerHTML = this.chooseMonth.substring(0, 4) + '年' + this.chooseMonth.substring(5, 7) + '月'
//        document.querySelector('#chooseYear .weui_cell').innerHTML = '年度'
//        // document.querySelector('#chooseSeason .weui_cell').innerHTML = '季度'
//        document.querySelector('#startDate .weui_cell').innerHTML = '开始日期'
//        document.querySelector('#endDate .weui_cell').innerHTML = '结束日期'
//      },
      'chooseMonthStart': function (newV) {
        document.querySelector('#chooseMonthStart .weui_cell').innerHTML = this.chooseMonthStart.substring(0, 4) + '年' + this.chooseMonthStart.substring(5, 7) + '月'
//        document.querySelector('#chooseYear .weui_cell').innerHTML = '按年度'
//        document.querySelector('#startDate .weui_cell').innerHTML = '开始日期'
//        document.querySelector('#endDate .weui_cell').innerHTML = '结束日期'
      },
      'chooseMonthEnd': function (newV) {
        document.querySelector('#chooseMonthEnd .weui_cell').innerHTML = this.chooseMonthEnd.substring(0, 4) + '年' + this.chooseMonthEnd.substring(5, 7) + '月'
//        document.querySelector('#chooseYear .weui_cell').innerHTML = '按年度'
//        document.querySelector('#startDate .weui_cell').innerHTML = '开始日期'
//        document.querySelector('#endDate .weui_cell').innerHTML = '结束日期'
      },
      'startDate': function () {
        document.querySelector('#startDate .weui_cell').innerHTML = this.startDate
      },
      'endDate': function () {
        document.querySelector('#endDate .weui_cell').innerHTML = this.endDate
      },
      'defaultOrgId': function (newV) {
        setTimeout(() => {
          for (let i = 0; i < this.condition.department.length; i++) {
            if (this.condition.department[i].departmentId === newV) {
              this.departmentActiveIndex = i
              this.categorys = this.condition.department[i].categorys
            }
          }
        }, 1000)
      },
      'defaultCategoryId': function (newV) {
        if ((typeof newV) === 'number' || (typeof newV) === 'object' && newV.length < 2) {
          this.categorysActiveIndex = this.chooseCategorysID = newV
        } else if ((typeof newV) === 'string') {
          this.categorysActiveIndex = this.chooseCategorysID = newV.split(',')
        } else {
          this.categorysActive = this.chooseCategorys = newV
        }
      },
      'defaultCategory': function (newV) {
        if ((typeof newV) === 'number' || (typeof newV) === 'object' && newV.length < 2) {
          this.categorysActive = this.chooseCategorys = newV
        } else if ((typeof newV) === 'string') {
          this.categorysActive = this.chooseCategorys = newV.split(',')
        } else {
          this.categorysActive = this.chooseCategorys = newV
        }
      },
//      首页-店铺监控 切换品牌和行业排名时重新获取筛选条件
      'tabId': function (newV) {
        var params = {'mkey': this.pageId}
        if (this.tabId !== '') {
          params['tabId'] = newV
        }
        this.$http.post(window.interface.conditions, params).then((res) => {
          var data = res.json()
          this.allCondition = data
          this.condition.platforms = data.platforms
          this.condition.department = data.dcTree
          this.brandActiveIndex = data.collectBrands ? data.collectBrands[0].brand_id : 0
          this.$http.post(window.interface.brands, {category_id: ''}).then((res) => {
            var data = res.json()
            this.condition.collectBrands = data.collectBrands
            this.condition.brands = data.brands
          })
        })
      }
    }
  }
</script>
<style lang="scss" scoped>
  .filter-box{
    width: 7.5rem;
    position: fixed;
    top: 0;
    bottom: 0;
    z-index: 1010;
  }
  .opacityDom{
    position: fixed;
    left: 0;
    top: 0;
    background: rgb(0,0,0);
    width: 100%;
    height: 100%;
    z-index: 1011;
  }
  .tip {
    margin: 0 auto;
    padding-left: .4rem;
    text-align: left;
    color: #FFD38B;
    background: url('../../../static/img/icon-tip.png') no-repeat center left / .3rem .3rem;
  }

  .filter-content{
    max-height: 85vh;
    overflow-y: scroll;
  }

  .btn-wrap{

    span{
      padding: .25rem;
      text-align: center;
      font-size: .36rem;
    }
  }

  .btn-dofilter{
    color: #FFF;
    background: #4A90E2;
  }

  .btn-reset{
    color: #999;
    background: #F5F5F5;
  }

  .split-line{
    margin: 0 .1rem;
    color: rgba(222, 222, 222, 1);
  }

  .filter-view {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    padding-bottom: 15px;
    background-color: rgba(255, 255, 255, 1);
    overflow-y: scroll;
    z-index: 1012;

  .filter-item {
    padding: .2rem;
    /*border-bottom: 5px solid #f2f2f2;*/
  }

  .title {
    padding-bottom: .1rem;
    margin-top: .1rem;
    margin-bottom: .1rem;
    font-weight: 500;
    font-size: .32rem;
    color: #333;
  }

  .item {
    position: relative;
    display: inline-block;
    margin: .05rem .12rem;
    width: 28%;
    height: .8rem;
    font-size: .28rem;
    line-height: .8rem;
    text-align: center;
    border: 1px solid rgba(228, 228, 228, 1);
    border-radius: .05rem;
    color: rgba(153, 153, 153, 1);
    word-break:keep-all;
    white-space:nowrap;
    overflow-x: hidden;
    overflow-y: hidden;
  }

  .item-active {
    word-break:keep-all;
    white-space:nowrap;
    // overflow-x: scroll;
    background: rgba(246, 250, 255, 1) url(../../../static/img/filter-active-bg.png) no-repeat right bottom / 18%;
  }

  .btn-complete {
    padding: .2rem 0;
    width: 20VW;
    color: #333;
    text-align: center;
    background: #EEEEEE;
  }

  .item-date {
    line-height: .5rem;
  }

  }
  .filter-item:nth-last-child(1){
    border:none;
  }
  .multiCategory{
    span{
      display: block;
      float: left;
    }
  }
  .btn-slidedown{
    width: .5rem;
    height: .3rem;
    background: url("") no-repeat center / .3rem .3rem;
    -webkit-transition: all .3s;
    transform: rotate(0deg);
  }
  .subtitle{
    font-size: .32rem;
    margin-top: .1rem;
    margin-bottom: .1rem;
  }
  .slideUp{
    transform: rotate(270deg);
  }

  .popover-content{
    /*display: none;*/
    position: absolute;
    top: -.5rem;
    left: 0;
    max-width: 3rem;
    height: .3rem;
    background: #e2e2e2;
  }

  .filter-tab-button {
    margin: .1rem .12rem;
    border: 1px solid #e4e4e4;
    border-radius: .4rem;
    height: .6rem;
    line-height: .6rem;
    text-align: center;
    overflow: hidden;

    &:after {
      content: '\20';
      display: block;
      height: 0;
      clear: both;
    }

    a {
      display: block;
      float: left;
      width: 33.3333333%;
      border-left: 1px solid #e4e4e4;
      box-sizing: border-box;
      color: #9b9b9b;
      background-color: #fff;

      &:first-child {
        border-left: none;
      }

      &.active {
        background-color: #f6faff;
      }
    }
  }
  #chooseYear,
  #chooseMonth {
    display: block;
    margin: .15rem .12rem .05rem;
    width: 40%;
    height: .8rem;
    line-height: .8rem;
  }
</style>
<style>
  .vux-popup-mask {
    width: 0 !important;
    height: 0 !important;
  }

  .weui_cell_ft.with_arrow:after{
    display: none !important;
  }
  #chooseYear .weui_cell,#chooseSeason .weui_cell,
  #chooseMonth .weui_cell {
    padding: 0 !important;
    display: block !important;
    text-align: center !important;
    color: #9b9b9b !important;
  }
  #startDate .weui_cell,
  #endDate .weui_cell,
  #chooseMonthStart .weui_cell,
  #chooseMonthEnd .weui_cell {
    text-align: center !important;
    color: #9b9b9b !important;
    line-height: 1.4;
  }
  .weui_cell_bd>p{
    color: #9b9b9b;
  }
  #scrollY0{
    transform: translate3d(0px, 0px, 0px) !important;
  }

  .btn-small{
    padding: .05rem;
    margin-left: .1rem;
    border: 1px solid #e2e2e2;
    border-radius: 3px;
    color: #fff;
    background: #4A90E2;
  }

</style>
